﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 15px;
            padding-top: 40px;
        }
    </style>
</head>
<body>
    <div class="full-width fixed-top" style="background-color: #ccc;">
        <a class="rayui-btn btn-primary float-right" onclick="javascript: rayui.clearCache();">清除缓存</a>
    </div>

    
<h3 class="spliter">22、圆环按钮</h3>
<div class="row">
    <div id="ringbtn0"></div>
    <div id="ringbtn1"></div>
    <div id="ringbtn2"></div>
    <div id="ringbtn3"></div>
    <div id="ringbtn4"></div>
    <div id="ringbtn5"></div>
    <div id="ringbtn6"></div>
</div>

    <h3 class="spliter">21、进度条</h3>
    <div class="row">
        <div id="progress1"></div>
        <div class="rayui-pgcolor-red" id="progress2"></div>
        <div class="rayui-pgcolor-green" id="progress3"></div>
        <div class="rayui-pgcolor-blue progress-striped" id="progress4"></div>
        <div class="rayui-pgcolor-orange progress-striped" id="progress5"></div>
        <div class="progress-striped" id="progress100"></div>
        <button class="rayui-btn btn-primary" id="loading">模拟加载</button>
        
    </div>

    <h3 class="spliter">20、计时按钮</h3>
    <div class="row">
        <button id="timerbtn-0">button</button>
        <a class="rayui-btn" id="timerbtn0">10秒倒计时</a>
        <a class="rayui-btn btn-primary btn-2x" id="timerbtn1">10秒增计时</a>
        <a class="rayui-btn btn-success btn-3x" id="timerbtn2">倒计时,递减0.2,减至8</a>
        <a class="rayui-btn btn-danger btn-4x" id="timerbtn3">增计时,递增0.02,增至0.3</a>
    </div>

    <h3 class="spliter">19、等待按钮</h3>
    <div class="row">
        <button id="loadbtn-0">button</button>
        <a class="rayui-btn btn-danger btn-4x-sh" id="loadbtn11">等待按钮</a>
        <a class="rayui-btn btn-success btn-3x-sh" id="loadbtn12">等待按钮</a>
        <a class="rayui-btn btn-primary btn-2x-sh" id="loadbtn13">等待按钮</a>
        <a class="rayui-btn" id="loadbtn0">等待按钮</a>
        <a class="rayui-btn btn-primary btn-2x" id="loadbtn1">等待按钮</a>
        <a class="rayui-btn btn-success btn-3x" id="loadbtn2">等待按钮</a>
        <a class="rayui-btn btn-danger btn-4x" id="loadbtn3">等待按钮</a>
    </div>
    <div class="row">
        <a class="rayui-btn btn-primary full-width btn-3x" id="loadbtn10">等待按钮</a>
    </div>

    <h3 class="spliter">18、徽章</h3>
    <div class="row row-aline">
        <label>徽章</label>
        <div class="row-content">
            <span class="rayui-badge badge-dot"></span>
            <span class="rayui-badge badge-dot badge-color-blue"></span>
            <span class="rayui-badge badge-dot badge-color-green"></span>
            <span class="rayui-badge badge-dot badge-color-orange"></span>
            <span class="rayui-badge badge-dot badge-color-red"></span>
            <span class="rayui-badge badge-ellipse">10</span>
            <span class="rayui-badge badge-ellipse badge-color-blue">13</span>
            <span class="rayui-badge badge-ellipse badge-color-green">25</span>
            <span class="rayui-badge badge-ellipse badge-color-orange">67</span>
            <span class="rayui-badge badge-ellipse badge-color-red">999</span>
            <span class="rayui-badge">10</span>
            <span class="rayui-badge badge-color-blue">12</span>
            <span class="rayui-badge badge-color-green">33</span>
            <span class="rayui-badge badge-color-orange">24</span>
            <span class="rayui-badge badge-color-red">99</span>
        </div>
    </div>
    <div class="row row-aline">
        <label>按钮徽章</label>
        <div class="row-content">
            <a class="rayui-btn">按钮<span class="rayui-badge badge-dot"></span></a>
            <a class="rayui-btn btn-primary">按钮<span class="rayui-badge badge-dot"></span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge badge-ellipse">10</span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge badge-ellipse badge-color-blue">13</span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge badge-ellipse badge-color-red">999</span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge">10</span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge badge-color-orange">24</span></a>
            <a class="rayui-btn">按钮<span class="rayui-badge badge-color-red">99</span></a>
        </div>
    </div>

    <h3 class="spliter">17、日期控件组</h3>
    <div class="row row-aline">
        <label>日期</label>
        <div class="row-content">
            <input class="rayui-input" id="calender" type="text" placeholder="选择年" />
            <input class="rayui-input" id="calender1" type="text" placeholder="选择年月" />
            <input class="rayui-input" id="calender2" type="text" placeholder="选择年月日" />
            <input class="rayui-input" id="calender3" type="text" placeholder="选择时间" />
            <input class="rayui-input" id="calender4" type="text" placeholder="选择日期+时间" />
        </div>
    </div>



    <h3 class="spliter">16、swich按钮组</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" ray-title="on|off" value="on" ray-event="chk1" />
            <input class="rayui-swich" type="button" ray-title="开" value="on" />
            <input class="rayui-swich" type="button" ray-title="好|不好" />
            <input class="rayui-swich" type="button" ray-title="" />
            <input class="rayui-swich" type="button" ray-title="禁止选择" disabled />
            <input class="rayui-swich" type="button" ray-title="字符过长|字符过长你好" />
        </div>
    </div>

    <div class="row row-aline">
        <label>box样式</label>
        <div class="row-content">
            <input class="rayui-swich" type="button" skin="box" ray-title="on|off" value="true" ray-value="true|false" ray-event="chk2" />
            <input class="rayui-swich" type="button" skin="box" ray-title="开" value="on" />
            <input class="rayui-swich" type="button" skin="box" ray-title="好|不好" />
            <input class="rayui-swich" type="button" skin="box" ray-title="" />
            <input class="rayui-swich" type="button" skin="box" ray-title="禁止选择" disabled />
            <input class="rayui-swich" type="button" skin="box" ray-title="字符过长|字符过长你好" />
        </div>
    </div>

    <h3 class="spliter">15、radio按钮组</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" name="default" ray-title="书籍" checked="checked" />
            <input class="rayui-radiobtn" type="radio" name="default" ray-title="游泳" />
            <input class="rayui-radiobtn" type="radio" name="default" ray-title="拳击" value="3" />
            <input class="rayui-radiobtn" type="radio" name="default" ray-title="跑步" disabled />
        </div>
    </div>
    <div class="row row-aline">
        <label>复选框样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" name="chk" skin="chk" ray-title="书籍" checked="checked" />
            <input class="rayui-radiobtn" type="radio" name="chk" skin="chk" ray-title="游泳" />
            <input class="rayui-radiobtn" type="radio" name="chk" skin="chk" ray-title="拳击" value="3" />
            <input class="rayui-radiobtn" type="radio" name="chk" skin="chk" ray-title="跑步" disabled />
        </div>
    </div>
    <div class="row row-aline">
        <label>混合样式</label>
        <div class="row-content">
            <input class="rayui-radiobtn" type="radio" ray-title="书籍" name="hobby" checked="checked" value="1" />
            <input class="rayui-radiobtn" type="radio" ray-title="游泳" name="hobby" id="youyong" value="2" skin="chk" />
            <input class="rayui-radiobtn" type="radio" ray-title="拳击" name="hobby" value="3" skin="outer" />
            <input class="rayui-radiobtn" type="radio" ray-title="足球" name="hobby" value="4" skin="bgcolor" />
            <input class="rayui-radiobtn" type="radio" ray-title="跑步" name="hobby" disabled skin="box" />
        </div>
    </div>


    <h3 class="spliter">14、checkbox组</h3>
    <div class="row row-aline">
        <label>默认样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" ray-title="选中" checked="checked" ray-event="chk1" />
            <input class="rayui-checkbox" type="checkbox" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" ray-title="禁止选择" disabled />
        </div>
    </div>
    <div class="row row-aline">
        <label>outer样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-value="1" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="outer" ray-title="禁止选择" disabled />
        </div>
    </div>
    <div class="row row-aline">
        <label>bgcolor样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-value="on" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="bgcolor" ray-title="禁止选择" disabled />
        </div>
    </div>
    <div class="row row-aline">
        <label>box样式</label>
        <div class="row-content">
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-value="是|否" ray-title="选中" checked="checked" ray-event="chk2" />
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-title="不选中" />
            <input class="rayui-checkbox" type="checkbox" skin="box" ray-title="禁止选择" disabled />
        </div>
    </div>


    <h3 class="spliter">13、fieldset组</h3>
    默认fieldset
    <fieldset>
        <legend>默认标题</legend>
        <input type="text" class="rayui-input" />
    </fieldset>
    标题居中，边框-小短线
    <fieldset class="border-style-dashed border-color-green">
        <legend class="legend-center" align="center">标题居中</legend>
        <input type="text" class="rayui-input" />
    </fieldset>
    禁用的fieldset，边框-点
    <fieldset disabled="disabled" class="border-style-dotted border-color-blue">
        <legend class="legend-right" align="right">标题在右边</legend>
        <input type="text" class="rayui-input" />
    </fieldset>
    <div class="card">本来想仅靠css样式使浏览器显示一致，但在firefox内还是无法实现，需要借助非标准的align属性</div>


    <h3 class="spliter">12、hr组</h3>
    默认
    <hr />
    绿色
    <hr class="hr-color-green" />
    蓝色
    <hr class="hr-color-blue" />
    自定义
    <hr style="background-color: #ef23df" />

    <h3 class="spliter">11、select美化样式</h3>
    <div class="row row-aline">
        <label>原生select实现</label>
        <div class="row-content">
            <select class="rayui-select">
                <option value="" selected>请选择</option>
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4</option>
                <option value="5">option5</option>
            </select>
        </div>
    </div>
    <div class="row row-aline">
        <label>ul转select实现</label>
        <div class="row-content">
            <ul class="rayui-select" name="UserType">
                <li selected>请选择</li>
                <li value="100"><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /></li>
                <li value="1">option1</li>
                <li label="分组1">
                    <ul>
                        <li value="11">分组1-option11</li>
                        <li value="12" disabled>分组1-option12</li>
                    </ul>
                </li>
                <li value="2">option2</li>
                <li value="3">option3</li>
            </ul>
        </div>
    </div>
    <div class="row row-aline">
        <label>多选select实现</label>
        <div class="row-content">
            <select class="rayui-select full-width" multiple="">
                <option value="" selected>请选择</option>
                <option value="1">option1</option>
                <option value="2">option2</option>
                <option value="3">option3</option>
                <option value="4">option4</option>
                <option value="5">option5</option>
            </select>
        </div>
    </div>

    <h3 class="spliter">10、标签-内容 左右组合，添加row-aline样式</h3>
    <div class="row row-aline">
        <label>label标签</label>
        <div class="row-content">
            <input type="text" class="rayui-input" placeholder="输入关键字" />
        </div>
    </div>
    <div class="row row-aline">
        <div class="row-label">div.label样式</div>
        <div class="row-content">
            <input type="text" class="rayui-input" placeholder="输入关键字" />
            <input type="text" class="rayui-input" placeholder="输入关键字" />
        </div>
    </div>
    <div class="row row-aline">
        <div class="row-label">div.label样式</div>
        <div class="row-content">
            <input type="text" class="rayui-input full-width" placeholder="输入关键字" />
        </div>
    </div>

    <h3 class="spliter">9、标签-内容 默认上下组合</h3>
    <div class="row">
        <label>label标签</label>
        <div class="row-content">
            <input type="text" class="rayui-input" placeholder="输入关键字" />
        </div>
    </div>
    <div class="row">
        <div class="row-label">div.label样式</div>
        <div class="row-content">
            <input type="text" class="rayui-input" style="display: block" placeholder="输入关键字" />
        </div>
    </div>
    <div class="row">
        <div class="row-label">div.label样式</div>
        <div class="row-content">
            <input type="text" class="rayui-input full-width" placeholder="输入关键字" />
        </div>
    </div>


    <h3>8、栅格系统-大小屏，参考的bootstrap，不知道使用的对不对<i class="ra ra-smile font-color-green"></i></h3>
    <h3 class="spliter">1200px显示12列，992px显示6列， 768px显示4列，&lt;768px显示3列</h3>
    <div class="grid-line">
        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
            <div class="col-lg-1 col-md-2 col-sm-3 col-xs-4">我的数据</div>
        </div>
    </div>

    <h3 class="spliter">7、栅格系统，行对齐</h3>
    <div class="grid-line">
        <div class="row sameHeight">
            <div class="col-3">我的数据太长了，我要把高度撑大</div>
            <div class="col-3">col-3</div>
            <div class="col-3">col-3</div>
            <div class="col-3">col-3</div>
        </div>
        <div class="row sameHeight">
            <div class="col-3">嵌套</div>
            <div class="col-9">
                <div class="grid-line">
                    <div class="row">
                        <div class="col-4">嵌套col-4</div>
                        <div class="col-4">嵌套col-4</div>
                        <div class="col-4">嵌套col-4</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <h3 class="spliter">6、栅格系统</h3>
    <div class="grid-line">
        <div class="row">
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
            <div class="col-1">col-1</div>
        </div>

        <div class="row">
            <div class="col-6">col-6</div>
            <div class="col-6">col-6</div>
        </div>

        <div class="row">
            <div class="col-3">col-3</div>
            <div class="col-3">col-3</div>
            <div class="col-3">col-3</div>
            <div class="col-3">col-3</div>
        </div>

        <div class="row">
            <div class="col-4">col-4</div>
            <div class="col-4">col-4</div>
            <div class="col-4">col-4</div>
        </div>

        <div class="row">
            <div class="col-12">col-12</div>
        </div>
    </div>

    <h3 class="spliter">5、按钮组 </h3>
    <a class="rayui-btn btn-circle "><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-primary"><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-2x"><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-2x btn-warning"><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-3x "><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-3x btn-success"><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-4x "><i class="ra ra-dustbin"></i></a>
    <a class="rayui-btn btn-circle btn-4x btn-danger"><i class="ra ra-dustbin"></i></a>
    <br />

    <div class="btn-group">
        <a class="rayui-btn">btn1</a>
        <a class="rayui-btn">btn2</a>
        <a class="rayui-btn">btn3</a>
        <a class="rayui-btn">btn4</a>
        <a class="rayui-btn">btn5</a>
    </div>
    <br />

    <a class="rayui-btn btn-primary-outline">primary</a>
    <a class="rayui-btn btn-success-outline">success</a>
    <a class="rayui-btn btn-info-outline">info</a>
    <a class="rayui-btn btn-warning-outline">warning</a>
    <a class="rayui-btn btn-danger-outline">danger</a>
    <a class="rayui-btn btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-oval btn-primary-outline">primary</a>
    <a class="rayui-btn btn-oval btn-success-outline">success</a>
    <a class="rayui-btn btn-oval btn-info-outline">info</a>
    <a class="rayui-btn btn-oval btn-warning-outline">warning</a>
    <a class="rayui-btn btn-oval btn-danger-outline">danger</a>
    <a class="rayui-btn btn-oval btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-oval btn-default">a标签默认</a>
    <input type="button" class="rayui-btn btn-oval btn-default" value="input按钮默认" />
    <a class="rayui-btn btn-oval btn-primary">primary</a>
    <a class="rayui-btn btn-oval btn-success">success</a>
    <a class="rayui-btn btn-oval btn-info">info</a>
    <a class="rayui-btn btn-oval btn-warning">warning</a>
    <a class="rayui-btn btn-oval btn-danger">danger</a>
    <a class="rayui-btn btn-oval btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-default">a标签默认</a>
    <input type="button" class="rayui-btn btn-default" value="input按钮默认" />
    <a class="rayui-btn btn-primary">primary</a>
    <a class="rayui-btn btn-success">success</a>
    <a class="rayui-btn btn-info">info</a>
    <a class="rayui-btn btn-warning">warning</a>
    <a class="rayui-btn btn-danger">danger</a>
    <a class="rayui-btn btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-2x-sh btn-default">a标签默认</a>
    <input type="button" class="rayui-btn btn-2x-sh btn-default" value="input按钮默认" />
    <a class="rayui-btn btn-2x-sh btn-primary">primary</a>
    <a class="rayui-btn btn-2x-sh btn-success">success</a>
    <a class="rayui-btn btn-2x-sh btn-info">info</a>
    <a class="rayui-btn btn-2x-sh btn-warning">warning</a>
    <a class="rayui-btn btn-2x-sh btn-danger">danger</a>
    <a class="rayui-btn btn-2x-sh btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-3x-sh btn-default">a标签默认</a>
    <input type="button" class="rayui-btn btn-3x-sh btn-default" value="input按钮默认" />
    <a class="rayui-btn btn-3x-sh btn-primary">primary</a>
    <a class="rayui-btn btn-3x-sh btn-success">success</a>
    <a class="rayui-btn btn-3x-sh btn-info">info</a>
    <a class="rayui-btn btn-3x-sh btn-warning">warning</a>
    <a class="rayui-btn btn-3x-sh btn-danger">danger</a>
    <a class="rayui-btn btn-3x-sh btn-disabled">disabled</a>
    <br />
    <a class="rayui-btn btn-4x-sh btn-default">a标签默认</a>
    <input type="button" class="rayui-btn btn-4x-sh btn-default" value="input按钮默认" />
    <a class="rayui-btn btn-4x-sh btn-primary">primary</a>
    <a class="rayui-btn btn-4x-sh btn-success">success</a>
    <a class="rayui-btn btn-4x-sh btn-info">info</a>
    <a class="rayui-btn btn-4x-sh btn-warning">warning</a>
    <a class="rayui-btn btn-4x-sh btn-danger">danger</a>
    <a class="rayui-btn btn-4x-sh btn-disabled">disabled</a>


    <h3 class="spliter">4、按钮大小</h3>
    <a class="rayui-btn btn-4x-sh">微图标4x-sh</a>
    <a class="rayui-btn btn-3x-sh">更小图标3x-sh</a>
    <a class="rayui-btn btn-2x-sh">小图标2x-sh</a>
    <a class="rayui-btn">正常图标</a>
    <a class="rayui-btn btn-2x">大图标2x</a>
    <a class="rayui-btn btn-3x">更大图标3x</a>
    <a class="rayui-btn btn-4x">超大图标4x</a>

    <h3 class="spliter">3、输入框大小组</h3>
    <input class="rayui-input input-4x-sh" type="text" placeholder="4x-sh" />
    <input class="rayui-input input-3x-sh" type="text" placeholder="3x-sh" />
    <input class="rayui-input input-2x-sh" type="text" placeholder="2x-sh" />
    <input class="rayui-input" type="text" placeholder="默认大小" />
    <input class="rayui-input input-2x" type="text" placeholder="2x" />
    <input class="rayui-input input-3x" type="text" placeholder="3x" />
    <input class="rayui-input input-4x" type="text" placeholder="4x" />


    <h3 class="spliter">2、卡片组</h3>
    <div class="card">卡片，默认背景颜色</div>
    <div class="card card-color-orange">卡片，预置颜色-橘色</div>
    <div class="card card-color-blue">卡片，预置颜色-蓝色</div>
    <div class="card" style="border-left-color: #ef23df">卡片，颜色自定义1</div>
    <div class="card-line">卡片，默认背景颜色</div>
    <div class="card-line card-color-orange">卡片，预置颜色-橘色</div>
    <div class="card-line card-color-blue">卡片，预置颜色-蓝色</div>
    <div class="card-line" style="border-left-color: #ef23df">卡片，颜色自定义1</div>


    <h3 class="spliter">1、标题组</h3>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <h1 class="spliter">一级标题</h1>
    <h2 class="spliter spliter-color-red">二级标题</h2>
    <h3 class="spliter spliter-color-green">三级标题</h3>
    <h4 class="spliter spliter-color-orange">四级标题</h4>
    <h5 class="spliter spliter-color-blue">五级标题</h5>
    <h6 class="spliter">六级标题</h6>

    <script>
        rayui.use(["select", "checkbox", "swich", "radiobtn", "calender", "ringbtn", "elem"],
            function () {

                var elem = rayui.elem,
                    select = rayui.select,
                    chkbox = rayui.checkbox,
                    calender = rayui.calender,
                    radiobtn = rayui.radiobtn,
                    ringbtn = rayui.ringbtn,
                    swich = rayui.swich;
                select.render();
                chkbox.render();
                radiobtn.render();
                swich.render();

                calender.render({
                    elem: '#calender',
                    type: "year"
                });

                calender.render({
                    elem: '#calender1',
                    type: "month"
                });

                calender.render({
                    elem: '#calender2',
                    type: "date"
                });

                calender.render({
                    elem: '#calender3',
                    type: "time"
                });

                calender.render({
                    elem: '#calender4',
                    type: "datetime"
                });

                function regLoadingBtn(id, options) {
                    var $obj = $('#' + id);
                    var lbtn = $obj.loadingBtn(options);
                    $obj.click(function () {
                        lbtn.start();
                        setTimeout(function () {
                            lbtn.stop();
                        }, 2000);
                    });
                }

                regLoadingBtn("loadbtn-0");
                regLoadingBtn("loadbtn0");
                regLoadingBtn("loadbtn1");
                regLoadingBtn("loadbtn2");
                regLoadingBtn("loadbtn3");
                regLoadingBtn("loadbtn11");
                regLoadingBtn("loadbtn12");
                regLoadingBtn("loadbtn13");
                regLoadingBtn("loadbtn10", { right: true });


                function regTimerBtn(id, options) {
                    var $obj = $('#' + id);
                    var lbtn = $obj.timerBtn(options);
                    $obj.click(function () {
                        lbtn.start();
                    });
                }

                regTimerBtn("timerbtn-0");
                regTimerBtn("timerbtn0");
                regTimerBtn("timerbtn1", { down: false });
                regTimerBtn("timerbtn2", { step: 0.2, min: 8, disabledClass:false });
                regTimerBtn("timerbtn3", { down: false, step: 0.02, max: 0.3 });


                //进度条
                $("#progress1").progress(20);
                $("#progress2").progress(40);
                $("#progress3").progress(60);
                $("#progress4").progress(80);
                $("#progress5").progress(90);
                var proIns51 = $("#progress100").progress({
                    progress: 0,
                    height: 16,
                    label: 'middle',
                    color: "#d9534f",
                    processColors: [{ 20: "#d9534f" }, { 50: "#cc6f10" }, { 80:"#2e8b57"}]
                });
                var progress = 0;
                function callprogress() {
                    progress += rayui.random(5, 15);
                    if (progress > 100) {
                        progress = 100;
                        $("#loading").prop("disabled", false);
                    }
                    proIns51.setProgress(progress);
                    if (progress !== 100)
                        setTimeout(callprogress, 1000);
                }
                $("#loading").click(function () {
                    progress = 0;
                    callprogress();
                    $(this).prop("disabled", true);
                });

                //圆环按钮
                (function initRingBtn() {
                    
                    ringbtn.render({
                        elem: '#ringbtn0'
                    });
        
                    ringbtn.render({
                        elem: '#ringbtn1',
                        ringColor: "#de9d1c",
                        label: "确定"
                    });

                    ringbtn.render({
                        elem: '#ringbtn2',
                        innerColor: "#084c6b",
                        fontColor:"#fff",
                        label: "确定"
                    });

                    ringbtn.render({
                        elem: '#ringbtn3',
                        innerRadius: 30
                    });

                    ringbtn.render({
                        elem: '#ringbtn4',
                        ringColor: "#de9d1c",
                        innerRadius: 30
                    });
                    
                    ringbtn.render({
                        elem: '#ringbtn5',
                        direction: 'left',
                        ringColor:"#0b9869,#97d0bd"
                    });

                    var cur = 1;
                    var ringins5 = ringbtn.render({
                        elem: '#ringbtn6',
                        direction: 'left',
                        ringColor: "#e42323,#ecadad",
                        label: "关闭",
                        click: function () {
                            if (cur % 2 === 1)
                                ringins5.setLabel("打开").setRingColor("#0b9869,#97d0bd");
                            else
                            ringins5.setLabel("关闭").setRingColor("#e42323,#ecadad");
                            cur++;
                        }
                    });

                })();


            });
    </script>

</body>
</html>